<mat-card>
    <mat-card-header>
        <div style="display:flex;width:100%;justify-content: space-between;">
            <mat-card-title></mat-card-title>
            <button (click)="closevideo()" mat-icon-button mat-dialog-close type="button" style="z-index: 999;">
                <mat-icon class="material-icons">close</mat-icon>
            </button>
        </div>

    </mat-card-header>

    <mat-card-content  >
        <div style="width:calc(80vw - 33px);height:384px">
            <!-- {{videoUrl}} -->
            <video #video style="width:100%;height:384px" [ngStyle]="{display: videoUrl?'block':'none'}" class="vjs-tech"
                id="video" controls tabindex="-1" muted="muted" autoplay=""
               ></video>
                <div  [ngStyle]="{display: videoUrl?'none':'flex'}"
                 class="acud-loading-loading-context acud-loading-bottom acud-loading-zIndex">
                 <svg
                        class="acud-loading-default acud-loading-begin" width="1em" height="1em" viewBox="0 0 1024 1024"
                        xmlns="http://www.w3.org/2000/svg">
                        <g fill="inherit">
                            <circle class="circle1" cx="511.1" cy="108.6" r="102.6"></circle>
                            <circle class="circle2" cx="862.1" cy="309.6" r="102.6"></circle>
                            <circle class="circle3" cx="862.1" cy="712.4" r="102.6"></circle>
                            <circle class="circle4" cx="511.1" cy="917.8" r="102.6"></circle>
                            <circle class="circle5" cx="159.7" cy="712.4" r="102.6"></circle>
                            <circle class="circle6" cx="159.7" cy="309.6" r="102.6"></circle>
                        </g>
                        <polygon class="frame"
                            points="511.1,108.6 861.8,311.2 862.1,712.4 511.1,917.8 159.7,712.4 146,309.6" fill="none"
                            stroke-width="50" stroke-miterlimit="10" stroke="inherit"></polygon>
                    </svg><span class="acud-loading-tip"></span></div>
                </div>

    </mat-card-content>
</mat-card>